<!--
 * @Description: 产品报表
 * @Author: lwx
 * @Date: 2022-12-01 12:09:23
 * @LastEditors: lwx
 * @LastEditTime: 2023-05-04 13:47:53
-->
<template>
    <!-- 报表 -->
    <div class="fillcontain">
        <el-card>
            <span class="label">产品总码</span>
            <el-input size="mini" class="sn_input" v-model="barcodes"></el-input>
            <el-button type="success" icon="el-icon-search" size="mini" @click="getParamsList()">查询</el-button>
            <el-button type="success" size="mini" @click="exportExcel()">
                <svg-icon icon-class="export" class="mr-1"></svg-icon>导出
            </el-button>
            <el-button type="primary" icon="el-icon-date" size="mini" @click="drawer = true">日期搜索</el-button>
        </el-card>
        <div class="report_content">
            <div class="flex-1 mr-2">
                <el-card>
                    <div class="box-title">堆叠数据</div>
                    <el-table border height="200px" :data="stackTable" width="100%"
                        :header-cell-style="{ background: '#FAFAFA!important' }">
                        <!-- <el-table-column label="总码" prop="barcodes" align="center">
                        </el-table-column> -->
                        <el-table-column prop="barcode" label="产品码" align="center">
                        </el-table-column>
                        <el-table-column prop="total" label="总数量" align="center" width="80">
                        </el-table-column>
                        <el-table-column prop="ok" label="OK数量" align="center" width="80">
                        </el-table-column>
                        <el-table-column prop="name" label="料仓序列号" align="center" width="90">
                        </el-table-column>
                        <el-table-column prop="time" label="创建时间" align="center" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>
            <div class="flex-1">
                <el-card>
                    <div class="box-title">测漏数据</div>
                    <!-- <data-chart :params="weldingParams" @changeParams="changeParams" /> -->
                    <el-table border style="width:100%" height="200px" :data="leakTable"
                        :header-cell-style="{ background: '#FAFAFA!important' }">
                        <!-- <el-table-column prop="barcodes" label="总码" align="center">
                        </el-table-column> -->
                        <el-table-column prop="name" label="测试流程名称" align="center">
                        </el-table-column>
                        <el-table-column prop="total_p" label="当前堆实际值" align="center">
                        </el-table-column>
                        <el-table-column prop="kq_p" label="当前位置际值" align="center">
                        </el-table-column>
                        <el-table-column prop="l_p" label="当前测试流量实际值" align="center">
                        </el-table-column>
                        <el-table-column prop="q2_p1" label="当前测试空压力实际值" align="center">
                        </el-table-column>
                        <el-table-column label="是否合格" align="center">
                            <template slot-scope="scope">
                              <span v-if="scope.row.is_ok === true" class="green">合格</span>
                              <span v-else-if="scope.row.is_ok === false" class="colorRed">不合格</span>
                              <span v-else></span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>
        </div>
        <div class="d-flex mt-2">
            <!-- <div class="mr-2 flex-1">
                    <el-card>
                        <div class="box-title">测漏数据表</div>
                        <el-table border height="296px" :data="leakTable"
                            :header-cell-style="{ background: '#FAFAFA!important' }">
                            <el-table-column prop="barcodes" label="总码"  align="center">
                            </el-table-column>
                            <el-table-column prop="name" label="测试流程名称" align="center">
                            </el-table-column>
                            <el-table-column prop="height" label="高度" align="center">
                            </el-table-column>
                            <el-table-column prop="pressure" label="压力" align="center">
                            </el-table-column>
                                <el-table-column prop="flow_now" label="当前测量流量" align="center">
                                </el-table-column>                      
                                <el-table-column prop="pressure_now" label="当前测量压力" align="center">
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div> -->
            <div class="flex-1">
                <el-card>
                    <div class="box-title">测漏折线图</div>
                    <data-chart :params="leakParams" @changeParams="changeParams" />
                </el-card>
            </div>
        </div>
        <!-- 右侧搜索框 -->
        <search-drawer :drawer="drawer" @closeDrawer="drawer = false" @toReport="toReport">
        </search-drawer>
    </div>
</template>

<script>
import DataChart from './childComps/DataChart.vue'
import SearchDrawer from './childComps/SearchDrawer.vue'
import { stackData, weldingData, leakData, exportSN } from '@/api/report.js'
import { paramsMixins } from '@/common/mixins/paramsMixins.js'
import { Loading } from 'element-ui'
import fileDownload from 'js-file-download'
export default {
    mixins: [paramsMixins],
    components: {
        DataChart,
        SearchDrawer
    },
    data() {
        return {
            barcodes: '',//产品码
            name: '',//产品名称
            leakTable: [],//测漏数据表
            stackTable: [],//堆叠数据表
            drawer: false,
        }
    },
    created() {
        if (this.$route.query.barcodes) {
            const { query } = this.$route
            this.barcodes = query.barcodes
            this.name = query.product_name
            this.getParamsList()//产品追溯
        }
    },
    methods: {
        getParamsList() {
            if(!this.barcodes){       
             return this.$message.warning('请先输入产品总码再查询')
           }
           this.getStackData()//获取堆叠数据
            // this.getWeldingData()//获取焊接数据
            this.getleakData()//获取测漏数据
        },
        //堆叠工位数据
        async getStackData() {
            const { data } = await stackData(this.barcodes)
            this.stackTable = data
        },
        //压堆工位数据
        // async getWeldingData() {
        //     const res = await weldingData(this.barcodes)
        //     if (res.data.length > 0) {
        //         this.weldingParams.x_min = res.start
        //         this.weldingParams.x_max = res.end
        //         res.data.forEach(item => {
        //             this.weldingParams.time_height.push([item.time, item.height])
        //             this.weldingParams.time_pressure.push([item.time, item.pressure])
        //         });
        //         this.weldingParams.series_data = this.weldingParams.time_pressure
        //         this.getYValue('压堆', this.weldingParams.time_pressure)
        //     }
        // },
        //测漏数据
        async getleakData() {
            const res = await leakData(this.barcodes)
            this.leakTable = res.data
            this.leakParams = this.$options.data().leakParams;
            this.leakParams.x_min = res.start
            this.leakParams.x_max = res.end
            res.data.forEach(item => {
                this.leakParams.time_stack.push([item.time, item.total_p])
                this.leakParams.time_position.push([item.time, item.kq_p])
                this.leakParams.time_flow.push([item.time, item.l_p])
                this.leakParams.time_pressure.push([item.time, item.q2_p1])
            });
            this.leakParams.series_data = this.leakParams.time_pressure
            this.getYValue('测漏', this.leakParams.time_pressure)

        },
        //y轴单位发生改变
        changeParams(val) {
            switch (val) {
                case '堆实际值':
                    this.leakParams.series_data = this.leakParams.time_stack
                    this.getYValue('测漏', this.leakParams.time_stack)
                    break;
                case '位置际值':
                    this.leakParams.series_data = this.leakParams.time_position
                    this.getYValue('测漏', this.leakParams.time_position)
                    break;
                case '流量实际值':
                    this.leakParams.series_data = this.leakParams.time_flow
                    this.getYValue('测漏', this.weldingParams.time_flow)
                    break;
                case '压力实际值':
                    this.leakParams.series_data = this.leakParams.time_pressure
                    this.getYValue('测漏', this.weldingParams.time_pressure)
                    break;
                default:
                    break;
            }
        },
        //获取y轴最大值和最小值
        getYValue(name, yArr) {
            if (yArr && yArr.length > 0) {
                let yData = []
                let xData = []
                yArr.forEach(item => {
                    xData.push(item[0])
                    yData.push(item[1])
                })
                if (name === '压堆') {
                    this.weldingParams.y_min = Math.floor(Math.min(...yData))
                    this.weldingParams.y_max = Math.ceil(Math.max(...yData))
                } else if (name === '测漏') {
                    this.leakParams.y_min = Math.floor(Math.min(...yData))
                    this.leakParams.y_max = Math.ceil(Math.max(...yData))
                }
            }
        },
        //导出
        async exportExcel() {
            let loading = Loading.service({
                text: '请您稍等，数据正在导出中...',
                background: 'rgba(0,0,0,.5)'
            })
            const res = await exportSN({ barcodes: this.barcodes, name: this.name })
            fileDownload(res, `${this.name}/${this.barcodes}.xlsx`)
            loading.close()
        },
        toReport(SN) {
            this.drawer = false
            this.barcodes = SN
            this.getParamsList()
        },
        //刷新
        refresh() {
            location.reload()
        }
    }
}
</script>
<style lang='scss' scoped>

.report_content {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 13px;
}

.sn_input {
    width: 200px;
    margin: 0 15px;
}

.box-title {
    font-size: 17px;
    margin: 0 10px 15px;
    font-weight: 600;
    color: #6acca3;
}

.label {
    font-size: 17px;
    color: #6acca3;
    font-weight: 600;
    margin-left: 10px;
}

/deep/.el-card__body {
    padding: 15px;
}
</style>